<template>
  <div class="real-time w-full h-full">
    <div class="real-time-title flex justify-between items-center">
      <div class="title flex items-center">
        <img src="../../img/title-icon.png" alt="" />
        实时调拨动态
      </div>
      <div class="overview flex">
        <div class="overview-item"
          >笔数： <span>{{ overView.dealCount }}</span></div
        >
        <div class="overview-item"
          >成交金额： <span>{{ overView.dealMoney }}</span
          >万元</div
        >
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" header-cell-class-name="headerClass" :height="200">
      <el-table-column prop="substanceName" label="物质名称" />
      <el-table-column prop="transferTime" label="调拨时间" />
      <el-table-column prop="originalValue" label="原值" />
      <el-table-column prop="netValue" label="净值" />
      <el-table-column prop="countValue" label="调拨数量" />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const overView = ref({
  dealCount: 0,
  dealMoney: 0
})
const tableData = ref([])
function init(data) {
  console.log('data', data)
  overView.value = data.overview
  tableData.value = data.tableData
}

defineExpose({ init })
</script>
<style scoped lang="scss">
 :deep( .headerClass){
   background-color: #EFF3FE !important;
}

.real-time {
  &-title {
    margin-bottom: 16px;

    .title {
      font-size: 18px;
      font-weight: 800;
      color: #2960aa;

      img {
        width: 16px;
        margin-right: 10px;
      }
    }

    .overview {
      font-size: 16px;
      color: #706f6f;

      &-item {
        margin-left: 42px;

        span {
          color: #333;
        }
      }
    }
  }
}
</style>
